<template>
  <Dropdown trigger="click" @on-click="setTheme" style="line-height: 60px;margin-left: 20px">
    <a href="javascript:void(0)">
      <Icon :style="{marginTop: '-2px', verticalAlign: 'middle'}" color="#495060" :size="18" type="md-color-fill"></Icon>
      <Icon type="md-arrow-dropdown"></Icon>
    </a>
    <DropdownMenu slot="list">
      <DropdownItem v-for="(item, index) in themeList" :key="index" :name="item.name">
        <Row type="flex" justify="center" align="middle">
          <span style="margin-right:10px;"><Icon :size="20"
             :type="item.name.substr(0, 1) !== 'b' ? 'ios-cafe-outline' : 'ios-cafe'"
             :color="item.menu"/></span>
          <span><Icon :size="22" type="md-shirt" :color="item.element"/></span>
        </Row>
      </DropdownItem>
    </DropdownMenu>
  </Dropdown>
</template>

<script>
  import Cookies from 'js-cookie';

  export default {
    name: 'themeDropdownMenu',
    data() {
      return {
        themeList: [
          {
            name: 'black_b',
            menu: '#495060',
            element: '#2d8cf0'
          },
          {
            name: 'black_g',
            menu: '#495060',
            element: '#50D7C4'
          },
          {
            name: 'black_y',
            menu: '#495060',
            element: '#cddc39'
          },
          {
            name: 'black_r',
            menu: '#495060',
            element: '#f25e43'
          },
          {
            name: 'light_b',
            menu: '#495060',
            element: '#2d8cf0'
          },
          {
            name: 'light_g',
            menu: '#495060',
            element: '#50D7C4'
          },
          {
            name: 'light_y',
            menu: '#495060',
            element: '#cddc39'
          },
          {
            name: 'light_r',
            menu: '#495060',
            element: '#f25e43'
          }
        ]
      };
    },
    methods: {
      setTheme(themeFile) {
        let menuTheme = themeFile.substr(0, 1);
        let mainTheme = themeFile.substr(-1, 1);
        if (menuTheme === 'b') {
          // 黑色菜单
          this.$store.commit('changeMenuTheme', 'dark');
          menuTheme = 'dark';
        } else {
          this.$store.commit('changeMenuTheme', 'light');
          menuTheme = 'light';
        }
        let path = '';
        let themeLink = document.querySelector('link[name="theme"]');
        let userName = Cookies.get('user');
        if (localStorage.theme) {
          let themeList = JSON.parse(localStorage.theme);
          let index = 0;
          let hasThisUser = themeList.some((item, i) => {
            if (item.userName === userName) {
              index = i;
              return true;
            } else {
              return false;
            }
          });
          if (hasThisUser) {
            themeList[index].mainTheme = mainTheme;
            themeList[index].menuTheme = menuTheme;
          } else {
            themeList.push({
              userName: userName,
              mainTheme: mainTheme,
              menuTheme: menuTheme
            });
          }
          localStorage.theme = JSON.stringify(themeList);
        } else {
          localStorage.theme = JSON.stringify([{
            userName: userName,
            mainTheme: mainTheme,
            menuTheme: menuTheme
          }]);
        }
        let stylePath = '';
        if (process.env.NODE_ENV === 'production') {
          stylePath = 'static/theme/'
        } else {
          stylePath = './static/theme/';
        }
        if (mainTheme !== 'b') {
          path = stylePath +  mainTheme + '.css';
        } else {
          path = '';
        }
        themeLink.setAttribute('href', path);
        $.post('../api/systemmanage/userCenter/saveUserTheme',{
          theme:mainTheme
        },(data) =>{
        })
      }
    }
  };
</script>
